<template>
  <div class="layout-container">

    <!-- 子路由出口 -->
    <router-view class="childRouter" />

    <!-- 标签导航栏 -->
    <van-tabbar class="layout-tabbar" v-model="active" route active-color='orange' :border='false'>
      <van-tabbar-item to='/home'>
        <i slot="icon" class="iconfont icon-biaoqiankuozhan_yingshi-218
"></i>
        <span class="text">影视</span>
      </van-tabbar-item>
<!-- ----------------我是分割线------------------------- -->
      <van-tabbar-item to="/shortplay"  >
        <i slot="icon" class="iconfont icon-shipin
"></i>
        <span class="text">短视频</span>
      </van-tabbar-item>
<!-- ----------------我是分割线------------------------- -->

       <van-tabbar-item class="diff" @click="$router.push({
         path:'/episode/1',
       })">
        <span slot="icon" class="iconfont icon-CombinedShape
"></span>
        <span class="text"></span>
       </van-tabbar-item>
<!-- ----------------我是分割线------------------------- -->

      <van-tabbar-item  to="/integral">
        <i slot="icon" class="iconfont icon-huiyuan
"></i>
        <span class="text">积分</span>
      </van-tabbar-item>
<!-- ----------------我是分割线------------------------- -->

      <van-tabbar-item to='/mine'>
        <i slot="icon" class="iconfont icon-wode-copy
"></i>
        <span class="text">我的</span>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>

export default {

    name: 'LayoutIndex',
    data() {
        return {
            active: 0
        }
    },
    methods: {

    }
}
</script>

<style lang="scss" scoped>
@import '../../assets/hao/font/iconfont.css';
.childRouter{
  // width: 100%;
  // height: 100%;
  // height: 100vh;
  // overflow: scroll;
  // overflow: hidden !important;
  // overflow-y: auto !important;
}
.layout-container {

  // padding: 0px 0px 140px;
  .hello{
  background-color: #f8f8f8;
  height: 30px;
  width: 100%;
  top: 0px;
  left: 0px;
  right: 0px;

  font-size: 16px;
  position: fixed;
  }
  .layout-tabbar {
    z-index: 999;
    height: 120px;
    position: fixed;
    i.iconfont {
      font-size: 52px;
      display: block;
      margin-bottom: 5px;
    }
    span.text {
      font-size: 16px;

    }
    span.iconfont{
      font-size: 76px;
      display: block;
      border-radius: 50%;
      background: #ff9800;
      color: white;
      width:140px;
      height: 140px;
      line-height: 140px;
      position: absolute;
      left: -78px;
      top: -110px;
      border: 15px solid #fff;
    }

  }
}
</style>
